<template lang="html">
  <div class="bottom-play clearfix">
    <div class="play-left">
      <img :src="currentSong.songinfo.pic_big" alt="" />
      <div class="song-con">
        <p class="title">{{ currentSong.songinfo.title }}</p>
        <p class="singer">{{ currentSong.songinfo.author }}</p>
      </div>
    </div>
    <audio class="audio" ref="audio" :src="currentSong.bitrate.file_link" controls autoplay></audio>
    <div class="play-right">
      <img v-if="getPlay" src="../../../static/img/play.png" class="play" @click="playHandler" alt="" />
      <img v-else src="../../../static/img/history-play.png" class="play" @click="playHandler" alt="" />
      <router-link to="/">
        <img src="../../../static/img/bottomMenu.png" class="botMenu" alt="" />
      </router-link>
    </div>
  </div>
</template>

<script>
import { mapState,mapMutations } from "vuex"

export default {
  name: "BotPlay",
  data () {
    return{
      currentSongTime:0,
      durationTime:0
    }
  },
  mounted(){
    // this.$refs.audio.currentTime = this.currentTime
    this.addEventListeners()
  },
  beforeDestroy () {
    this.removeEventListeners()
  },
  methods: {
    playHandler(){
      if(this.$refs.audio.paused && this.currentSong.bitrate.file_link !== ''){
        this.updataPlay(true)
        this.$refs.audio.play();
      }else{
        this.updataPlay(false)
        this.$refs.audio.pause();
      }
    },
    addEventListeners(){
      //当音频/视频（audio/video）的播放位置发生改变时触发, 获取当前播放时间函数
      this.$refs.audio.addEventListener('timeupdate', this._currentTime)
      //当开始播放指定的音频/视频时, 获取全部的播放时间
      this.$refs.audio.addEventListener('canplay', this._durationTime)
    },
    removeEventListeners: function(){
      this.$refs.audio.removeEventListener('timeupdate', this._currentTime)
      this.$refs.audio.removeEventListener('canplay', this._durationTime)
    },
    _currentTime(){
      //获取当前播放时间, currentTime 是 audio 标签提供的
      this.currentSongTime = this.$refs.audio.currentTime
      this.updataCurrentTime(this.currentSongTime)
    },
    _durationTime(){
      //获取全部的播放时间, durationTime 是 audio 标签提供的
      this.durationTime = this.$refs.audio.durationTime
    },
    ...mapMutations(['updataPlay','updataCurrentTime'])
  },
  computed: {
    ...mapState(['getPlay','currentTime','currentSong'])
  }
}
</script>

<style lang="less" scoped>
  .bottom-play{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 98/100rem;
    background-color: #fff;
    .play-left{
      float: left;
      img{
        width: 80/100rem;
        height: 80/100rem;
        margin-top: 10/100rem;
        margin-left: 15/100rem;
        float: left;
      }
      .song-con{
        font-size: 23/100rem;
        margin-left: 20/100rem;
        float: left;
        .title{
          font-size: 30/100rem;
          margin-top: 5/100rem;
          width: 300/100rem;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .singer{
          margin-top: 15/100rem;
          color: #666;
        }
      }
    }
    .play-right{
      float: right;
      img{
        float: left;
      }
      .play{
        width: 60/100rem;
        height: 60/100rem;
        margin-top: 20/100rem;
      }
      .botMenu{
        width: 45/100rem;
        margin-top: 36/100rem;
        margin-right: 20/100rem;
        margin-left: 30/100rem;
      }
    }
  }

  .audio{
    display: none;
  }
</style>
